<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>右侧悬浮</title>
<style>
    #div1{width: 100px;height: 150px;background: green;position: absolute;right: 0;bottom:0 ;}
</style>
<script type="text/javascript">
    window.onscroll=function(){
        var oDiv=document.getElementById('div1');
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
        //startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);//底部悬浮
        startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));//中间悬浮
    };

    var timer=null;
    function startMove(iTarget){
        var oDiv=document.getElementById('div1');
        clearInterval(timer);
        timer=setInterval(function(){
            var speed=(iTarget-oDiv.offsetTop)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);//向上取整和向下取整
            
            if(oDiv.offsetTop==iTarget){
                clearInterval(timer);
            }else{
                oDiv.style.top=oDiv.offsetTop+speed+'px';
            }
        },30);
    };
</script>    

</head>
<body style="height: 2000px;">
    <div id="div1"></div>
</body>
</html>